<template>
  <div style="margin: 30px">
    <el-breadcrumb separator=">">
      <el-breadcrumb-item :to="{ path: '/' }" style="font-size: 16px"><i class="el-icon-s-promotion"></i>首页
      </el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>


    <el-container>
      <el-header>
        <el-menu
            router
            :default-active="activeIndex2"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
          <el-menu-item index="/FreeSpace">空闲车位</el-menu-item>
          <el-menu-item index="/MyCar">我的车辆</el-menu-item>
          <el-menu-item index="/UserInformation">个人信息</el-menu-item>
          <el-menu-item index="/AddNewCar">添加车辆</el-menu-item>
          <el-menu-item index="/SpaceOccupancy">车位占用</el-menu-item>
          <el-menu-item index="/StopHistory">历史停车</el-menu-item>
          <el-submenu index="">
            <template slot="title">我的申述</template>
            <el-menu-item index="/allageTable">未处理申述</el-menu-item>
            <el-menu-item index="/hanleAllageTable">已处理申述</el-menu-item>
          </el-submenu>
          <el-submenu style="float: right">
            <template slot="title">我的</template>
            <el-menu-item index=""><a href="#" @click="openVip()">开通Vip</a></el-menu-item>
            <el-menu-item index="" @click="openPassword()">修改密码</el-menu-item>
            <el-menu-item index="/">退出登录</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-header>
      <el-main class="el-main">
        <router-view/>
      </el-main>
      <el-footer>

        <div style="background-image: url('../assets/imgs/wave.png');height: 90px"></div>
        <div style="padding: 30px 0;height: 50px; text-align: center;background-color: #3f3f3f;color: #b1b1b1">
          <p>Copyright © 蔚莱科技有限公司版权所有 京ICP备12003709号-3 京公网安备 11010802029572号</p>
          <p>蔚莱在线WWW.WEILAI.CN 专注于良好的停车体验</p>
        </div>
      </el-footer>
      <el-dialog title="修改密码" :visible.sync="dialogFormVisible">
        <el-form :model="editForm" :rules="rules" ref="editForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="旧密码" prop="oldPassword" :label-width="formLabelWidth">
            <el-input v-model="editForm.oldPassword" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="newPassword" :label-width="formLabelWidth">
            <el-input type="password" v-model="editForm.newPassword" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="确认新密码" prop="ageinPassword" :label-width="formLabelWidth">
            <el-input type="password" v-model="editForm.ageinPassword" autocomplete="off"></el-input>
          </el-form-item>
          <el-button type="primary" @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="updatePassword()">确 定</el-button>
          <el-button type="primary" @click="openPhone()">手机号修改</el-button>
        </el-form>
      </el-dialog>


      <el-dialog title="修改密码" :visible.sync="dialogFormVisiblePhone">
        <el-form :model="editForm" :rules="rules" ref="editForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="手机号码"  prop="phone">
            <el-input  style="width: 500px" type="text"  v-model="editForm.phone" placeholder="请输入手机号码"></el-input>
            <el-button :disabled="disabled" @click="sendSms()">{{ buttonText }}</el-button>
          </el-form-item>
          <el-form-item label="验证码" prop="Sms" :label-width="formLabelWidth">
            <el-input type="password" v-model="editForm.sms" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="newPassword" :label-width="formLabelWidth">
            <el-input type="password" v-model="editForm.newPassword" autocomplete="off"></el-input>
          </el-form-item>
          <el-button type="primary" @click="dialogFormVisiblePhone = false">取 消</el-button>
          <el-button type="primary" @click="updatePasswordByPhone()">确 定</el-button>
        </el-form>
      </el-dialog>
    </el-container>
  </div>

</template>

<script>

export default {
  data() {

    let validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.editForm.newPassword !== '') {
          this.$refs.editForm.validateField('newPassword');
        }
        callback();
      }
    };
    let validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.editForm.newPassword) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };

    return {
      activeIndex: '1',
      activeIndex2: '1',
      dialogFormVisible: false,
      dialogFormVisiblePhone: false,
      disabled: false,
      countDown: 30,     // 倒计时时间（秒）
      buttonText: '获取验证码',
      editForm: {
        phone: '',
        sms:'',
        cardId: '',
        oldPassword: '',
        newPassword: '',
        ageinPassword: ''
      },
      rules: {
        newPassword: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur'},
          {validator: validatePass, trigger: 'blur'}
        ],
        ageinPassword: [
          {required: true, message: '请确认密码', trigger: 'blur'},
          {min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur'},
          {validator: validatePass2, trigger: 'blur', required: true}
        ],
        phone: [
          {required: true, message: '输入手机号', trigger: 'blur'},
          {min: 11, max: 11, message: '输入正确的手机号', trigger: 'blur'},
        ],
        sms: [
          {required: true, message: '输入验证码', trigger: 'blur'},
          {min: 6, max: 6, message: '输入六位六位数字验证码', trigger: 'blur'},
        ],
      }
    };
  },
  methods: {
      updatePasswordByPhone(){
      let url = 'http://localhost:8080/user/updatePasswordByPhone'
      console.log(this.editForm)
      this.axios.post(url,this.editForm).then((response)=>{
        let responseBody = response.data
        if (responseBody.code==200){
          this.$message({
            message: '修改密码成功',
            type: 'success'
          });
          this.dialogFormVisible = false;
          this.dialogFormVisiblePhone=false;
          this.editForm.oldPassword = ''
          this.editForm.newPassword = ''
          this.editForm.ageinPassword = ''
        }else {
          this.$message({
            message:responseBody.message,
            type: 'error'
          });
        }
      });
    },
    sendSms(){
      let url = 'http://localhost:8080/user/getSms?phone='+this.editForm.phone
      this.axios.post(url).then((response)=>{
        let responseBody = response.data
        if(responseBody.code==200){
          this.$message({
            message: '获取成功，注意查收！',
            type: 'success'
          });
        }else {
          this.$message({
            message:responseBody.message,
            type: 'error'
          });
        }
      });
    },
    openPhone() {
      this.dialogFormVisible = false;
      this.dialogFormVisiblePhone=true;
      this.editForm.oldPassword = ''
      this.editForm.newPassword = ''
      this.editForm.ageinPassword = ''
    },
    openPassword() {
      this.dialogFormVisible = true
    },
    updatePassword() {
      this.editForm.cardId = localStorage.getItem('cardId')
      console.log(this.editForm)
      let url = 'http://localhost:8080/user/updatePassword'
      this.axios.post(url, this.editForm).then((response) => {
        let responseBody = response.data
        if (responseBody.code == 200) {
          this.$message({
            message: '修改成功！',
            type: 'success'
          });
          this.editForm.oldPassword = ''
          this.editForm.newPassword = ''
          this.editForm.ageinPassword = ''
          this.dialogFormVisible=false
        } else {
          this.$message({
            message: responseBody.message,
            type: 'error'
          });
        }
      });
    },

    openVip() {

      let url = 'http://localhost:8080/user/openVip?cardId=' + localStorage.getItem('cardId')
      console.log(url)
      this.axios.post(url).then((response) => {
        let responseBody = response.data
        if (responseBody.code == 200) {
          window.location.href = "http://localhost:8080/pay/openVip"
          this.$message({
            showClose: true,
            message: '开通成功！',
            type: 'success'
          });
        } else {
          this.$message({
            showClose: true,
            message: responseBody.message,
            type: 'error'
          });
        }
      });
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    }
  }
}
</script>

<style scoped>

</style>